<template>
  <v-item-group>
    <v-container>
       <v-row align="center">
    <v-row justify="space-around">
      <v-switch v-model="autorun" class="ma-2" label="轮播"></v-switch>
      <v-switch v-model="showArrows" class="ma-2" label="显示箭头"></v-switch>
      <v-switch v-model="vertical" class="ma-2" label="竖直排列"></v-switch>
      <v-switch v-model="reverse" class="ma-2" label="重置"></v-switch>
    </v-row>

    <v-window
      v-model="window"
      class="elevation-1"
      :vertical="vertical"
      :show-arrows="showArrows"
      :reverse="reverse"
    >
      <v-window-item
        v-for="n in length"
        :key="n"
      >
        <v-card flat>
          <v-card-text>
            <v-row class="mb-4" align="center">
              <v-avatar color="grey" class="mr-4"></v-avatar>
              <strong class="title">Title {{ n }}</strong>
              <v-spacer></v-spacer>
              <v-btn icon>
                <v-icon>mdi-account</v-icon>
              </v-btn>
            </v-row>

            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>

            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </v-card-text>
        </v-card>
      </v-window-item>
    </v-window>
  </v-row>
      <v-row>
        <v-col v-for="item in items" :key="key" cols="12" md="4">
          <v-item v-slot:default="{ active, toggle }">
            <v-card
              :color="active ? 'primary' : ''"
              class="d-flex align-center"
              dark
              height="200"
              @click="toggle"
            >
              <v-scroll-y-transition>
                <div v-if="active" class="display-3 flex-grow-1 text-center">Active</div>
                <div v-if="toggle" class="display-3 flex-grow-1 text-center">{{item.value}}</div>
              </v-scroll-y-transition>
            </v-card>
          </v-item>
        </v-col>
      </v-row>
    </v-container>
  </v-item-group>
</template>
<script>
export default {
  data: () => ({
    length: 3,
    onboarding: 0,
    
      window: 0,
      showArrows: false,
      vertical: false,
      reverse: false,
      autorun: false,
      items:[
        {
          key:1,
          value:'系统字典'
        },
        {
          key:1,
          value:'核算产品'
        },
        {
          key:1,
          value:'核算场景'
        },
        {
          key:1,
          value:'核算解析规则'
        },
        {
          key:1,
          value:'业务代号'
        },
        {
          key:1,
          value:'核算产品属性'
        },
        {
          key:1,
          value:'产品科目映射'
        },
        {
          key:1,
          value:'传票表'
        },
        {
          key:1,
          value:'清算规则'
        },
      ]
  }),
  computed: {},
  watch: {},
  created () {
      setInterval(() => {
        if (!this.autorun) return
        if (++this.window >= this.length) this.window = 0
      }, 2000)
    },
  methods: {
    next() {
      this.onboarding =
        this.onboarding + 1 === this.length ? 0 : this.onboarding + 1;
    },
    prev() {
      this.onboarding =
        this.onboarding - 1 < 0 ? this.length - 1 : this.onboarding - 1;
    }
  }
};
</script>